Implement nested and non-nested `Label` support for `DisplayName` #64821

ilonatommy · 2025-12-19T12:44:14Z

Add Label component for Blazor Forms

Add Label component that renders accessible labels with support for both nested and non-nested patterns

Description

This PR adds a new Label<TValue> component that renders an HTML <label> element with the display name extracted from [Display] or [DisplayName] attributes, falling back to the property name.

Details in #64791 (comment), #64791 (comment).

Usage

Nested pattern (wrapping):

<Label For="() => model.Name">
    <InputText @bind-Value="model.Name" />
</Label>

Renders:

<label>
    Name
    <input name="model.Name" ... />
</label>

Non-nested pattern (for/id):

<Label For="() => model.Name" />
<InputText @bind-Value="model.Name" />

Renders:

<label for="model.Name">Name</label>
<input id="model.Name" name="model.Name" ... />

Design

Supports both patterns for label-input association:

Nested pattern: Input is wrapped inside the label, providing implicit HTML association without for/id matching
Non-nested pattern: Label renders a for attribute that references the input's auto-generated id attribute

Changes

Label<TValue>: New component that conditionally renders for attribute when no ChildContent is provided
InputBase<TValue>.IdAttributeValue: New protected property that auto-generates id from the bound expression (follows same pattern as NameAttributeValue)
All input components (InputText, InputNumber, InputCheckbox, InputDate, InputSelect, InputTextArea, InputHidden): Now render id attribute using IdAttributeValue
Explicit for and id attributes in AdditionalAttributes take precedence over auto-generated values

API Changes

// New component
Microsoft.AspNetCore.Components.Forms.Label<TValue>
Microsoft.AspNetCore.Components.Forms.Label<TValue>.Label() -> void
Microsoft.AspNetCore.Components.Forms.Label<TValue>.For.get -> Expression<Func<TValue>>?
Microsoft.AspNetCore.Components.Forms.Label<TValue>.For.set -> void
Microsoft.AspNetCore.Components.Forms.Label<TValue>.ChildContent.get -> RenderFragment?
Microsoft.AspNetCore.Components.Forms.Label<TValue>.ChildContent.set -> void
Microsoft.AspNetCore.Components.Forms.Label<TValue>.AdditionalAttributes.get -> IReadOnlyDictionary<string, object>?
Microsoft.AspNetCore.Components.Forms.Label<TValue>.AdditionalAttributes.set -> void

// New protected property on InputBase<TValue>
Microsoft.AspNetCore.Components.Forms.InputBase<TValue>.IdAttributeValue.get -> string

Fixes #64791

Copilot

Pull request overview

This PR implements a new Label<TValue> component for Blazor Forms that renders an HTML <label> element with display name extraction from [Display] or [DisplayName] attributes. The component uses a wrapping pattern where input components are nested inside the label element, providing implicit HTML label-input association without requiring for/id attribute matching.

Key Changes

Added Label<TValue> component that implements IComponent for rendering accessible form labels
Component extracts display names using the existing ExpressionMemberAccessor.GetDisplayName utility
Comprehensive unit test suite covering various scenarios including attribute precedence, nested properties, and child content rendering

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 2 comments.

File	Description
src/Components/Web/src/Forms/Label.cs	Implements the new `Label<TValue>` component with parameter handling, display name extraction, and render tree building
src/Components/Web/test/Forms/LabelTest.cs	Adds comprehensive unit tests covering display name extraction, attributes, child content, and error scenarios
src/Components/Web/src/PublicAPI.Unshipped.txt	Documents the new public API surface for `Label<TValue>` component

src/Components/Web/src/Forms/Label.cs

src/Components/Web/test/Forms/LabelTest.cs

src/Components/Web/src/Forms/Label.cs

…into fix-64791

src/Components/Web/src/Forms/Label.cs

…est for that case.

javiercn · 2026-01-09T15:24:45Z

There are two ways to use label isn't it?

Wrapping input:

   <label>Text <input ...></label>

Using "for":

   <label for="id">Text</label>
   <input id="id" ...>

Is there a reason why we chose to implement only 1? Should we be detecting either of by checking to see if the RenderFragment has a value and using a form or the other appropriately?

ilonatommy · 2026-01-12T07:37:27Z

Is there a reason why we chose to implement only 1?

Yes, breaking changes:

#64791 (comment)
#64791 (comment)

javiercn · 2026-01-12T11:15:37Z

@ilonatommy thanks for the additional details.

I don't think the breaking change concern is a valid one for a couple of reasons:

for can be set earlier when we set parameters inside Label. If you apply an explicit for label, it overrides.
id/name can be applied in the same way to components. If a user explicitly sets name/id, it will take precedence.
- We could choose to not even do this and force you to set the name on the component manually, even though it's subpar.

ilonatommy · 2026-01-12T11:20:32Z

for can be set earlier when we set parameters inside Label. If you apply an explicit for label, it overrides.

We don't allow explicit for anymore, see #64821 (comment)

javiercn · 2026-01-12T12:00:10Z

for can be set earlier when we set parameters inside Label. If you apply an explicit for label, it overrides.

We don't allow explicit for anymore, see #64821 (comment)

We should allow passing For and let the customer value override it like other components do. https://github.com/dotnet/aspnetcore/blob/main/src/Components/Web/src/Forms/InputBase.cs#L199-L221
https://github.com/dotnet/aspnetcore/blob/main/src/Components/Web/src/Forms/InputText.cs#L36-L37

(note that even though we set NameAttributeValue after AdditionalAttributes, we do check AdditionalAttributes on InputBase to account for its value).

ilonatommy · 2026-01-12T14:19:21Z

for can be set earlier when we set parameters inside Label. If you apply an explicit for label, it overrides.

We don't allow explicit for anymore, see #64821 (comment)

Thank you, existing way of working is a good argument to not to throw, I am convinced.

The non-nested pattern is a bit more tricky, can we discuss it separately and if we find a consensus, add it in a follow up?

ilonatommy · 2026-01-12T14:55:44Z

The non-nested pattern is a bit more tricky, can we discuss it separately and if we find a consensus, add it in a follow up?

We have InputText implement it the way you proposed (

aspnetcore/src/Components/Web/src/Forms/InputBase.cs

Line 203 in f006e3b

    
           if (AdditionalAttributes?.TryGetValue("name", out var nameAttributeValue) ?? false)

) but there's no other Blazor component generating a value that needs to match name. The name attribute is self-contained. If the user overrides it, they take full responsibility for server-side binding, but nothing in the framework breaks.

The Label + Input is not quite the same, it's 2 framework components that should coordinate. I think I got convinced that it's enough to document the coordination requirement.

javiercn

Looks great, only a few lose ends to track down, but other than that, it's good to go after we figure out that bit.

src/Components/Web/src/Forms/InputBase.cs

src/Components/Web/src/Forms/Label.cs

src/Components/Web/test/Forms/LabelTest.cs

src/Components/Web/src/Forms/FieldIdGenerator.cs

Implement nested label rendering.

b7347ca

ilonatommy requested a review from javiercn December 19, 2025 12:44

ilonatommy self-assigned this Dec 19, 2025

ilonatommy requested a review from a team as a code owner December 19, 2025 12:44

Copilot AI review requested due to automatic review settings December 19, 2025 12:44

github-actions bot added the area-blazor Includes: Blazor, Razor Components label Dec 19, 2025

Copilot started reviewing on behalf of ilonatommy December 19, 2025 12:44 View session

ilonatommy added this to the .NET 11 Planning milestone Dec 19, 2025

Copilot AI reviewed Dec 19, 2025

View reviewed changes

src/Components/Web/src/Forms/Label.cs Outdated Show resolved Hide resolved

src/Components/Web/test/Forms/LabelTest.cs Show resolved Hide resolved

ilonatommy marked this pull request as draft December 19, 2025 12:56

ilonatommy added 2 commits December 19, 2025 14:05

Feedback: condition rendering more strictly.

adeacbe

Feedback: localization test.

41c8ab7

ilonatommy marked this pull request as ready for review December 19, 2025 13:09

This was referenced Dec 19, 2025

Known Build Error: error : Cannot create a file when that file already exists. #61178

Open

Unable to read data from the transport connection: An existing connection was forcibly closed by the remote host. dotnet/dnceng#5922

Open

maraf reviewed Dec 19, 2025

View reviewed changes

src/Components/Web/src/Forms/Label.cs Show resolved Hide resolved

dotnet-policy-service bot added the pending-ci-rerun When assigned to a PR indicates that the CI checks should be rerun label Dec 27, 2025

Feedback: explicit for should not break implicit For association.

21e3415

ilonatommy removed the pending-ci-rerun When assigned to a PR indicates that the CI checks should be rerun label Jan 2, 2026

ilonatommy added 3 commits January 5, 2026 12:18

Merge branch 'main' into fix-64791

7a0cb28

Merge branch 'main' into fix-64791

f44cf7a

Merge branch 'fix-64791' of https://github.com/ilonatommy/aspnetcore …

31c7258

…into fix-64791

ilonatommy requested a review from maraf January 6, 2026 11:36

pavelsavara approved these changes Jan 6, 2026

View reviewed changes

src/Components/Web/src/Forms/Label.cs Show resolved Hide resolved

src/Components/Web/src/Forms/Label.cs Outdated Show resolved Hide resolved

src/Components/Web/src/Forms/Label.cs Outdated Show resolved Hide resolved

ilonatommy added 2 commits January 7, 2026 09:09

Feedback: unify previous value storage types.

06b798e

Feedback: check for all params change, not only display name + unit t…

d4ce0f1

…est for that case.

Unify the behavior: no throwing.

ccd918a

Feedback: non-nested approach.

b274683

ilonatommy changed the title ~~Implement nested Label for DisplayName~~ Implement nested and non-nested Label support for DisplayName Jan 12, 2026

ilonatommy mentioned this pull request Jan 12, 2026

[11.0 P1] Forms on Blazor support DisplayName attribute dotnet/AspNetCore.Docs#36438

Draft

javiercn reviewed Jan 13, 2026

View reviewed changes

ilonatommy added 2 commits January 14, 2026 13:31

Feedback: small updates.

b88187e

Feedback: Sanitize id like MVC does.

60b6542

ilonatommy enabled auto-merge (squash) January 14, 2026 13:52

ilonatommy merged commit 23ce838 into dotnet:main Jan 14, 2026
25 checks passed

dotnet-policy-service bot modified the milestones: .NET 11 Planning, 11.0-preview1 Jan 14, 2026

javiercn reviewed Jan 14, 2026

View reviewed changes

src/Components/Web/src/Forms/FieldIdGenerator.cs Show resolved Hide resolved

This was referenced Jan 14, 2026

Update FieldIdGenerator to support HTML5 instead of HTML 4.01 #65058

Merged

API proposal for Label support for DisplayName #65062

Open

dotnet-maestro bot mentioned this pull request Jan 15, 2026

[main] Source code updates from dotnet/aspnetcore dotnet/dotnet#4189

Merged

Implement nested and non-nested Label support for DisplayName #64821

Implement nested and non-nested Label support for DisplayName #64821

Uh oh!

Conversation

ilonatommy commented Dec 19, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Add Label component for Blazor Forms

Description

Usage

Design

Changes

API Changes

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Key Changes

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

javiercn commented Jan 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

ilonatommy commented Jan 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

javiercn commented Jan 12, 2026

Uh oh!

ilonatommy commented Jan 12, 2026

Uh oh!

javiercn commented Jan 12, 2026

Uh oh!

ilonatommy commented Jan 12, 2026

Uh oh!

ilonatommy commented Jan 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

javiercn left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Implement nested and non-nested `Label` support for `DisplayName` #64821

Implement nested and non-nested `Label` support for `DisplayName` #64821

ilonatommy commented Dec 19, 2025 •

edited

Loading

javiercn commented Jan 9, 2026 •

edited

Loading

ilonatommy commented Jan 12, 2026 •

edited

Loading

ilonatommy commented Jan 12, 2026 •

edited

Loading